<template>
    <div>
        <ph-divider type="primary">基本案例</ph-divider>
        <ph-button-group :container="true">
            <ph-button type="success" @click="onClick('success')">success</ph-button>
            <ph-button type="danger" @click="onClick('danger')">danger</ph-button>
            <ph-button type="warning" @click="onClick('warning')">warning</ph-button>
            <ph-button type="info" @click="onClick('info')">info</ph-button>
            <ph-button @click="onClick('')">light</ph-button>
        </ph-button-group>
        <ph-divider type="primary">基本案例position:bottom</ph-divider>
        <ph-button-group :container="true">
            <ph-button type="success" @click="onClick1('success')">success</ph-button>
            <ph-button type="danger" @click="onClick1('danger')">danger</ph-button>
            <ph-button type="warning" @click="onClick1('warning')">warning</ph-button>
            <ph-button type="info" @click="onClick1('info')">info</ph-button>
            <ph-button @click="onClick1('')">light</ph-button>
        </ph-button-group>
        <ph-divider type="primary">基本案例theme:dark</ph-divider>
        <ph-button-group :container="true">
            <ph-button type="success" @click="onClick2('success')">success</ph-button>
            <ph-button type="danger" @click="onClick2('danger')">danger</ph-button>
            <ph-button type="warning" @click="onClick2('warning')">warning</ph-button>
            <ph-button type="info" @click="onClick2('info')">info</ph-button>
            <ph-button @click="onClick2('')">light</ph-button>
        </ph-button-group>
        <ph-divider type="primary">自定义icon｜ icon:fa-chrome ,iconClass:fa, iconColor:red </ph-divider>
        <ph-button-group :container="true">
            <ph-button type="danger" @click="onClick3()">自定义icon</ph-button>
        </ph-button-group>
        <ph-divider type="primary">基本案例clickable:true</ph-divider>
        <ph-button-group :container="true">
            <ph-button type="danger" @click="onClick4()">可以点击的消息</ph-button>
        </ph-button-group>
    </div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance } from "vue";
import { PhDivider, PhButtonGroup, PhButton, PhMessage } from "@/index";
import { PhMsgType } from "ph-message";
import PhToast from 'ph-toast';
export default defineComponent({
  components: {
    PhButtonGroup,
    PhButton,
    PhDivider,
  },
  setup() {
    const ins = getCurrentInstance();
    const onClick = (type: PhMsgType) => {
    
        const openFn = (PhMessage as any)[type]
        if(openFn)openFn("中国，我爱你")
        else PhMessage.notify("中国，我爱你")
    };
    const onClick1 = (type: PhMsgType) => {
        const openFn = (PhMessage as any)[type]
        if(openFn)openFn("中国，我爱你",{position:"bottom"})
        else PhMessage.notify("中国，我爱你",{position:"bottom"})
    };
    const onClick2 = (type: PhMsgType) => {
        const openFn = (PhMessage as any)[type]
        if(openFn)openFn("中国，我爱你",{theme:"dark"})
        else PhMessage.notify("中国，我爱你",{theme:"dark"})
    };
    const onClick3 = ()=>{
        PhMessage.notify("自定义icon",{
            icon:"fa-chrome",
            iconClass:"fa",
            iconColor:"red"
        })
    }
    const onClick4 = ()=>{
        PhMessage.success("消息可以点击",{
            clickable:true
        }).click(()=>{
            PhToast.show("消息点击事件")
        })
    }
    return { onClick, onClick1, onClick2, onClick3, onClick4 };
  },
});
</script>
